<template>
  <div>
    <div class="header">
      <div >
      <div>
        <img src="../assets/新建文件夹/logo_c27d29c.png" alt="" style="margin-right: 80px" />
      </div>
      <div>
        <ul>
          <li class="nav" v-for="(item, i) in items" :key="i">
            <router-link :to="item.url" :class="{ active: now == i }">{{ item.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <div>
        <img src="../assets/新建文件夹/sphonenum_5e61eaf.png" alt="" style="width: 185px; margin-left: 50px" />
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['now']
  ,
  data() {
    return {
      swiperOption: {
        direction: "vertical"
      },
      // now: 0,
      items: [
        {name:"首页",url:'/zhuyem'},
         {name:"家庭服务",url:'/familyservice'},
          {name:"企业服务",url:'/enterprisservice'},
           {name:"城市合伙",url:'/cityCooperation'},
            {name:"关于我们",url:'/aboutOur'},
             {name:"平台培训中心",url:'/trainCenter'},

      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.header{
  height: 80px;
  width: 100vw;
  border-bottom: 2px solid #00beaf;
  background-color:#fff; 
  &>div{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 1000px;
    ul{
       height: 80px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    li{
      margin-right: 15px  ;
      font-size: 14px;
      a{
            color: #707070;
            &:hover{
              color: #00beaf;
            }
            &.active{
              color: #00beaf;
            }
      }

    }
    }
  }
   }
</style>